<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="dialogVisible=true">添加分类</el-button>
      </div>
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
            label="id"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="cate_name"
            label="日期"
           width="250">
          </el-table-column>
          <el-table-column
            prop="cate_alias"
            label="姓名"
           width="250">
          </el-table-column>
          <!-- <el-table-column
            prop="address"
            label="地址">
          </el-table-column> -->
          <el-table-column  
          width="250"
            label="操作">
              <template #default="{row}"> 
                <!-- row 是作用域插槽传过来的数据 slot没有写name的话 默认使用 default  -->
                <el-button type="primary" size="mini" @click="showEditDialog(row.id)">修改</el-button>
                <el-button type="danger" size="mini" @click="remove(row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
    </el-card>
    <el-dialog
      @close="restForm('form')"
      title="提示"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form ref="form" :rules="rules" :model="listBook" label-width="80px">
        <el-form-item label="活动名称" prop="cate_name">
          <el-input v-model="listBook.cate_name" ></el-input>
        </el-form-item>
        <el-form-item label="活动名称"  prop="cate_alias">
          <el-input v-model="listBook.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBook">确 定</el-button>
        <!-- dialogVisible 控制弹出框的显示隐藏 值位布尔值 -->
      </span>
       
    </el-dialog>
    <!-- 修改框 -->
       <el-dialog
      @close="onrestForm()"
      title="提示"
      :visible.sync="udialogVisible"
      width="40%">
      <!-- @close="onrestForm" 再关闭弹框的时候 清楚输入的数据 -->
      <el-form ref="uform" :rules="rules" :model="uRuleForm" label-width="80px">
        <el-form-item label="活动名称" prop="cate_name">
          <el-input v-model="uRuleForm.cate_name" ></el-input>
        </el-form-item>
        <el-form-item label="活动名称"  prop="cate_alias">
          <el-input v-model="uRuleForm.cate_alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="udialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getArtCateById">确 定</el-button>
        <!-- dialogVisible 控制弹出框的显示隐藏 -->
      </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArtCate',
     
  data() {
        return {
          editVisible: false,
          udialogVisible:false,
          dialogVisible: false,
          list:[], // 这是 初始的渲染 然后 去求书籍 然后 进行 覆盖 
          listBook:{
            cate_name: ' ',
            cate_alias: ' '
          },
          // 修改
          uRuleForm:{
            cate_name: ' ',
            cate_alias: ' '
          },
          rules:{
            cate_name:[
              { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
            cate_alias:[
              { required: true, message: '请输入活动名称', trigger: 'blur' },
            { pattern: /^[a-z0-9A-Z]{1,15}$/, message: '长度在 3 到 5 个字符', trigger: 'blur' }  
            ]
          }
        }
      },
  methods:{
  // 删除
  // 实现删除文章分类
    remove(id) {
      // 如果id=1或者id=2，提示用户 管理员不允许删除这个文章分类
      if (id === 1 || id === 2) return this.$message.error("管理员不允许删除这个文章分类");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
        // 发起请求删除对应的分类
        const { data: res } = await this.$axios.delete("/my/cate/del", {
          params: { id },
        });

        // 判断是否删除成功
        if (res.code !== 0) return this.$message.error("删除分类失败！");
        this.$message.success("删除分类成功！");
        this.initCateList();
      })
        .catch((err) => err);
    },
    // 数据修改完成发送数据
    // 修改分类
    getArtCateById() {
      // 1. 表单预验证
      this.$refs.uform.validate(async valid => {
        if (!valid) return
        // 2. 发起请求
        const { data: res } = await this.$axios.put('/my/cate/info', this.uRuleForm)
        // 3. 修改失败
        if (res.code !== 0) return this.$message.error('修改分类失败！')
        // 4. 修改成功：提示用户、关闭对话框、刷新列表数据
        this.$message.success('修改分类成功！')
        this.udialogVisible = false
        this.initCateList()
      })
    },

    // 获取框框内数据
    //  获取id 通过id找到对象  再匹配后 
    async showEditDialog(id) {
        // 1. 获取分类的基本信息
        const { data: res } = await this.$axios.get('/my/cate/info', {
          params: { id }
        })
        if (res.code === 0) {
          // 2. 给data中的修改进行赋值
          this.uRuleForm = res.data
          // 3. 展示对话框
          this.udialogVisible = true
        }
      },
    // 获取图书
    async initCateList(){
      const {data:res} = await this.$axios.get('/my/cate/list')
      this.list = res.data
      console.log(res);
    },
    // 关闭图层
    restForm(val){
      console.log(val);
      this.$refs[val].resetFields()
    },
    // 关闭修改图层
    onrestForm(){
      this.$refs.uform.resetFields()
    },
    // 增加图书
    addBook(){
      // 兜底 
      this.$refs.form.validate( async (valid)=>{
        if(!valid) return 
        const {data:res} = await this.$axios.post('/my/cate/add',this.listBook)
        console.log(res,'新增图书');
        // 获取新图书
        this.initCateList()
        console.log(this.list);
        this.dialogVisible = false
      })
    }
  },
  created(){
    this.initCateList()
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
